<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>用户列表数据2</title>

		<!--
			1.引入函数类库
			2.使用模板工具类中的静态资源文件默认的路径都在static目录下
		-->
		<script src="/js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			// jquery中有一种编程思想，函数式编程
			$(function (){
				// 让整个页面加载完成之后再次执行，以后所有的操作都应该在函数内完成
				// alert("jQuery调试！！！")
				/**
				 * 常见Ajax用法
				 * 		1.$.get(url地址,提交数据,回调函数,返回值类型)
				 * 		2.$.post(...)
				 */

				/**
				 * 业务需求：
				 * 		要求向后端服务器发起请求/findAjaxUser，之后将返回值结果（）进行页面解析
				 */
				$.get("/findAllByAjax",function (result){
					// 1.result是服务器返回的结果
					// 2.将返回值结果进行循环遍历
					// for(var i=0;i<result.length;i++){
					// 	var user = result[i]
					// 	console.log(user)
					// }
					// for(index in result){
					// 	var user = result[index]
					// 	console.log(user)
					// }
					for(user of result){
						const id = user.id
						const name = user.name
						const age = user.age
						const sex = user.sex
						const tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
						console.log(tr)

						$("#userTable").append(tr)
					}
				})

				/**
				 * 参数说明：
				 * 		1.key=value&key2=value2...
				 * 			例如：id=1&name=Tony
				 * 		2.js对象的写法
				 * 			语法：{key:value,key2:value2,...}
				 * 			例如：{id:1,name='Tony'}
				 */
				$.get("/findAllByAjax",'id=1&name=Tony',function(result){
                    console.log("请求成功")
                })
				const object = {id:1,name:'Tony'}
				$.get("/findAllByAjax",object,function(result){
					console.log("get请求成功")
				})

				$.post("/findAllByAjax","id=1&name=Tony",function(result){
					console.log("post请求成功")
				})

				// 要求返回值是JSON字符串
				$.getJSON("/findAllByAjax",{id:1,name:'Tony'},function(result){
					console.log("getJSON请求成功")
				})

				// 最基本的ajax
				$.ajax({
					type:'get',//请求类型
					url:'/findAllByAjax',
					success:function(result){
						console.log("ajax请求成功")
					},
					error:function(result){
						console.log("ajax请求失败")
					}
				})
			})
		</script>
	</head>
	<body>
	<!--准备一个表格-->
		<table id="userTable" border="1px" align="center" width="800px">
			<tr align="center">
				<td colspan="4"><h3>用户列表</h3></td>
			</tr>
			<tr align="center">
				<td>ID</td>
				<td>名称</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
		</table>
	</body>

</html>